<template>
  <el-card style="margin: 20px; overflow: hidden;height: 660px;">
    <el-form label-width="100px">
      <el-row :gutter="10" style="margin-top: 40px;">
        <el-col :span="12">

          <el-row :gutter="10" >
            <el-col :span="12">
              <el-form-item label="报废资产">
                <el-input v-model="saveFrom.asset" placeholder="请输入报废资产"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批时间">
                <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                v-model="saveFrom.time"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="报废原因" style="margin-top: 10px;">
            <el-input
                v-model="saveFrom.reason"
                :autosize="{ minRows: 4, maxRows: 60 }"
                maxlength="50"
                show-word-limit
                type="textarea"
                placeholder="请输入相关信息"
            />
          </el-form-item>

          <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="12">
              <el-form-item>
                <el-upload
                    v-model:file-list="fileList"
                    v-model:action="actionUrl"
                    name="file"
                    :limit="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                >
                  <el-icon>
                    <Plus/>
                  </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img :src="dialogImageUrl"
                       :alt="dialogImageUrl"/>
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="12">

          <el-row :gutter="10">
            <el-col :span="12">

            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-button type="primary" @click="submit"
               style="float: right;
               width: 100px;
               margin-top: 10px">提交</el-button>

  </el-card>
</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const saveFrom = ref({
  asset: '',
  time: '',
  reason: '',

});

let userInfo = getUser();
const submit = () => {
  saveFrom.value.userId = userInfo.id;
  saveFrom.value.username = userInfo.username;
  saveFrom.value.phone = userInfo.phone;
  saveFrom.value.email = userInfo.email;
  saveFrom.value.department = userInfo.department;
  saveFrom.value.type = `scrap`;

  saveFrom.value.approver = '假名';


  if (!saveFrom.value.reason){
    errorInfo('请输入申请原因')
    return
  }


  let data = qs.stringify(saveFrom.value);
  axios.post(BASE_URL + '/v1/scrapRequire/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!');
          clearAll();
          router.push('/applicationList');
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })

}
const clearAll = () => {
  saveFrom.value.asset = '';
  saveFrom.value.time = '';
  saveFrom.value.reason = '';


}

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code === 2000) {
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);

}
/**图片上传相关代码结束**/
</script>

<style scoped>

</style>